<!--
 * @Author: your name
 * @Date: 2021-09-13 12:13:42
 * @LastEditTime: 2021-09-15 20:30:00
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup\6-jQuery\day02\xxtx\user.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理页面</title>
    <!-- jquery -->
    <script src="/briup/6-jQuery/js/jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.css" rel="stylesheet">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.js"></script>
    <!-- <style>
        th {
            text-align: center;
        }
    </style> -->

</head>

<body>
    <div class="header">用户管理</div>
    <button type="button" class="btn btn-info" id="addUserButton">新增</button>
    <button type="button" class="btn btn-danger" id="lotsofDel">批量删除</button>
    <button type="button" class="btn btn-info" id="exitUserButton">退出</button>
    <table class="table">
        <thead>
            <tr>
                <th>id</th>
                <th>密码</th>
                <th>昵称</th>
                <th>电话</th>
                <th>真实姓名</th>
                <th>性别</th>
                <th>地址</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <!-- 新增用户modal -->
    <div class="modal" id="myModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">新增用户</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="" class="form-horizontal">
                        <div class="form-group">
                            <label for="input1" class="col-sm-2 control-label">
                                用户名：
                            </label>
                            <input type="text" class="form-control" name="username" id="myInput">
                        </div>
                        <div class="form-group">
                            <label for="input1" class="col-sm-2 control-label">
                                密码：
                            </label>
                            <input type="password" class="form-control" name="password">
                        </div>
                        <div class="form-group">
                            <label for="input1" class="col-sm-2 control-label">
                                性别：
                            </label>
                            <select class="form-select gender-select" aria-label="Default select example">
                                <option value="男">male</option>
                                <option value="女">female</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="input1" class="col-sm-2 control-label">
                                电话：
                            </label>
                            <input type="telephone" class="form-control" name="telephone">
                        </div>
                        <div class="form-group">
                            <label for="input1" class="col-sm-2 control-label">
                                地址：
                            </label>
                            <input type="address" class="form-control" name="address">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" id="saveModalCancel" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" id="saveModalConfirm" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    $(function() {
            $("myModal").show();
        })
        //全局声明baseURL
    var baseURL = "http://39.103.202.53:8888"
        //调用loadAllUser()函数，加载所有用户信息
    loadAllUser();
    //批量删除功能
    $("button:contains(批量删除)").on({
            click: function() {
                //alert("批量删除");
                //根据用户id进行批量删除
                var ids = $("input[type=checkbox]:checked")
                ids.map(function(i, item) {
                    var id = $(item).val();
                    //调用删除的方法
                    // console.log("id为" + id + "的用户被删除")
                    $.ajax({
                        url: baseURL + "/baseUser/deleteById?id=" + id,
                        headers: {
                            "Authorization": sessionStorage.getItem("token")
                        },
                        success: function(res) {
                            alert("id为" + id + "的用户被删除了");
                            //查询数据
                            loadAllUser()

                        }
                    })
                })

            }
        })
        //根据用户id一个一个删除用户
        //事件代理，tobody代理删除操作
    $("tbody").on({
            click: function() {
                $(this);
                var inputId = $(this)[0].parentElement.parentElement.firstElementChild.firstElementChild;
                var id = $(inputId).val();
                $.ajax({
                    url: baseURL + "/baseUser/deleteById?id=" + id,
                    headers: {
                        "Authorization": sessionStorage.getItem("token")
                    },
                    success: function(res) {
                        alert("id为" + id + "的用户被删除了");
                        //查询数据
                        loadAllUser()
                    }
                })
            }
        }, ".del")
        //查询所有用户信息功能
    function loadAllUser() {
        $("tbody").empty();
        $.ajax({
            url: baseURL + "/baseUser/findAll",
            headers: {
                "Authorization": sessionStorage.getItem("token")
            },
            success: function(res) {
                // console.log(res);
                res.data.forEach(function(item) {
                    // console.log(item.id);
                    var newTr = $(`<tr>
                    <td>
                        <input type="checkbox" value=` + item.id + ` \/>
                    </td>
                    <td>
                        ` + item.password + `
                    </td>
                    <td>
                        ` + item.username + `
                    </td>
                    <td>
                        ` + item.telephone + `
                    </td>
                    <td>
                        ` + item.realname + `
                    </td>
                    <td>
                        ` + item.gender + ` 
                    </td>
                    <td>
                        ` + item.address + ` 
                    </td>
                    <td class="operation">
                    <span class="edit">编辑</span>
                    <span class="del">删除</span>
                 </td>
                    </tr>`)
                    $("tbody").append(newTr);
                });
            }
        })
    }
    //打开新增用户模态框功能
    $("#addUserButton").on('click', function() {
            var myModal = document.getElementById('myModal');
            console.log($("#myModal"));
            $("#myModal").show();
            //打开模态框时聚焦第一个输入框，方便用户操作
            var myInput = document.getElementById("myInput");
            myInput.focus();
            //关闭模态框
            $(".btn-close").on('click', function() {
                    $("#myModal").hide();
                    clearSaveModal();
                })
                //保存模态框，取消按钮
            $("#saveModalCancel").on('click', function() {
                    $("#myModal").hide();
                    clearSaveModal();
                })
                //清空模态框
            function clearSaveModal() {
                console.log("清空模态框");
                $("input[name='username']").val("");
                $("input[name=password]").val("");
                $(".gender-select").val("male");
                $("input[name=telephone]").val("");
                $("input[name=address]").val("");
            }
            //保存模态框，确定按钮
            $("#saveModalConfirm").on('click', function() {
                //$("#myModal").hide();
                var username = $("input[name=username]").val();
                var password = $("input[name=password]").val();
                var gender = $(".gender-select").val();
                var telephone = $("input[name=telephone]").val();
                var address = $("input[name=address]").val();
                var obj = {
                        username,
                        password,
                        gender,
                        telephone,
                        address
                    }
                    //发送请求
                $.ajax({
                    url: baseURL + "/baseUser/saveOrUpdate",
                    method: "post",
                    headers: {
                        "Authorization": sessionStorage.getItem("token")
                    },
                    data: obj,
                    success: function(res) {
                        alert(res.message);
                        $("#myModal").hide();
                        loadAllUser();
                        clearSaveModal();
                    }
                })
            })

        })
        //退出返回登录页面功能
    $("#exitUserButton").on("click", function() {
            window.location.href = "./login.html";
        })
        //编辑功能，复用新增模态框
    $("tbody").on({
        click: function() {
            //打开模态框
            var myModal = document.getElementById('myModal');
            console.log($("#myModal"));
            $("#myModal").show();
            //关闭模态框
            $(".btn-close").on('click', function() {
                    $("#myModal").hide();
                    //clearSaveModal();
                })
                //保存模态框，取消按钮
            $("#saveModalCancel").on('click', function() {
                $("#myModal").hide();
                // clearSaveModal();
            })
            var token = sessionStorage.getItem("token");
            $.ajax({
                    url: baseURL + "/baseUser/findAll?token=" + token,
                    method: "get",
                    headers: {
                        "Authorization": token
                    },
                    success: function(res) {
                        console.log(res);
                        var edit = document.getElementsByClassName("edit");
                        console.log(edit.length);
                        var inputId = $(".del")[0].parentElement.parentElement.firstElementChild.firstElementChild;
                        var id = $(inputId).val();
                        //if (id === "res.data.id")
                        // for (var i = 0; i < edit.length; i++) {
                        // edit[i].onclick = function() {
                        //     var j = 0;
                        //     $("input[name=username]").val(res.data[j].username);
                        //     $("input[name=password]").val(res.data[j].password);
                        //     $(".gender-select").val(res.data[j].gender);
                        //     $("input[name=telephone]").val(res.data[j].telephone);
                        //     $("input[name=address]").val(res.data[j].address);
                        //     j++;
                        // }
                        // }








                    }
                })
                //导入数据



        }
    }, ".edit")
</script>

</html>